<template>
  <transition name="hidden">
    <div v-show="show"  @click="dialogClose" class="dialog-mask" >
      <div class="dialog-wrapper animated fadeInUp" ref="dialogWrapper">
        <transition name="fade">
          <div v-show="show" @click.stop="" class="dialog-container">
            <div class="dialog-header">
              <div class="dialog-header-text">
                {{title}}
              </div>
              <div id="label-list"  style="flex:1;text-align: left;display: flex;">
                <div :key="index" @click="tabClick(index, city['parent_id'])" v-for="(city, index) in value" :class="{ label: true ,active: index === type }">
                  {{ city.name }}
                </div>
              </div>
              <div id="label-line" style="width:0;height: 2px;background-color: crimson;transition: all 0.3s;"></div>
            </div>
            <div class="dialog-body">
              <div :key="i.id" @click="changeArea(i, i.type)" class="item-body" v-for="i in city">
                {{i.name}}
              </div>
            </div>
          </div>
        </transition>
      </div>
    </div>
  </transition>
</template>

<script>

export default {
  name: 'AreaSelect',
  props: {
    show: Boolean,
    title: String,
    value: Array
  },
  data () {
    return {
      city: [],
      type: 0
    }
  },
  methods: {
    dialogClose: function () {
      this.$emit('close')
    },
    changeArea: function (data, index) {
      this.type = index - 1
      const _this = this
      if (this.value.length >= this.type) {
        this.value[this.type] = data
        this.value.splice(index, this.value.length - index)
      } else {
        this.value.push(data)
      }
      this.$emit('input', this.value)
      this.$emit('on-change', this.value)
      setTimeout(function () {
        _this.setLabelLine()
      }, 10)
      if (this.type >= 2) {
        this.dialogClose()
      } else {
        this.load(data.id)
      }
    },
    tabClick: function (index, id) {
      this.type = index
      this.setLabelLine()
      this.load(id)
    },
    load: function (id) {
      const _this = this
      const http = new XMLHttpRequest()
      http.open('get', 'http://120.27.68.219:8360/api/region/list?parentId=' + id)
      http.send()
      http.onload = function () {
        const data = JSON.parse(http.responseText)
        if (data.errno === 0) {
          _this.city = data.data
        }
      }
    },
    setLabelLine: function () {
      let label, labelLine
      if (document.getElementById('label-list').hasChildNodes()) {
        label = document.getElementById('label-list').getElementsByClassName('label')[this.type]
      }
      if (document.getElementById('label-line') != null) {
        labelLine = document.getElementById('label-line')
        labelLine.style.width = label.offsetWidth + 'px'
        const left = label.offsetLeft
        labelLine.style.transform = 'translateX(' + left + 'px)'
      }
    }
  },
  created () {
    const _this = this
    setTimeout(function () {
      _this.setLabelLine()
    }, 10)
    _this.load('1')
  }
}
</script>

<style scoped lang="scss">
.hidden-enter-active {
  animation: hidden-in .5s;
}
.hidden-leave-active {
  animation: hidden-in .5s reverse;
}

.fade-enter-active {
  animation: bounce-in .5s;
}
.fade-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0%);
  }
}

@keyframes hidden-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
@keyframes label-in {
  from{
    //border-bottom: white 2px solid;
    color: black;
  }
  to{
    //border-bottom: crimson 2px solid;
    color: crimson;
  }
}
.dialog-mask {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 99;
  animation-duration: 0.6s;
  .dialog-wrapper {
    width: 100%;
    height: 100%;
    animation-duration: 0.3s;
    .dialog-container {
      background-color: white;
      width: 100%;
      bottom: 0;
      position: absolute;
      -moz-border-radius-topleft: 8px;
      -moz-border-radius-topright: 8px;
      border-radius: 8px 8px 0 0;
      height: 55%;
      .dialog-header {
        height: 88px;
        border-radius: 12px 12px 0 0;
        background-color: #fffcfc;
        border-bottom: 1px solid #cccccc;
        display: flex;
        flex-direction: column;
        font-size: 13px;
        .dialog-header-text{
          flex:1;
          font-weight: bold;
          color: black;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .label {
          padding:15px 5px 5px 5px;
          display: inline-block;
          margin-left: 12px;
        }
        .active {
          animation: label-in 1s;
          //border-bottom: crimson 2px solid;
          color: crimson;
        }
      }
      .dialog-body {
        display: flex;
        max-height: calc(100% - 93px);
        width: 100%;
        overflow: auto;
        flex-direction: column;
        .item-body{
          margin: 8px;
          padding-left: 10px;
          text-align: left;
        }
      }
    }
  }
}

@media screen and (min-width: 1024px){
  @keyframes small-in {
    from{
      transform: scale(0);
    }
    to{
      transform: scale(1);
    }
  }
  .fade-enter-active {
    animation: small-in .5s;
  }
  .fade-leave-active {
    animation: small-in .5s reverse;
  }
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  ::-webkit-scrollbar-track {
    border-radius: 3px;
    background: rgba(0,0,0,0.06);
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.08);
  }
  ::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(0,0,0,0.12);
    -webkit-box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
  }
  .dialog-mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 99;
    animation-duration: 0.6s;
    .dialog-wrapper {
      width: 100%;
      height: 100%;
      animation-duration: 0.3s;
      display: flex;
      justify-content: center;
      .dialog-container {
        background-color: white;
        width: 25%;
        margin: auto;
        position: absolute;
        top: 0;
        border-radius: 8px;
        height: 55%;
        .dialog-header {
          height: 88px;
          border-radius: 12px 12px 0 0;
          background-color: #fffcfc;
          border-bottom: 1px solid #cccccc;
          display: flex;
          flex-direction: column;
          font-size: 13px;
          .dialog-header-text{
            flex:1;
            font-weight: bold;
            color: black;
            display: flex;
            justify-content: center;
            align-items: center;
          }
          .label {
            cursor: pointer;
            padding:15px 5px 5px 5px;
            display: inline-block;
            margin-left: 12px;
          }
          .active {
            animation: label-in 1s;
            //border-bottom: crimson 2px solid;
            color: crimson;
          }
        }
        .dialog-body {
          display: flex;
          max-height: calc(100% - 93px);
          width: 100%;
          overflow: auto;
          flex-direction: column;
          .item-body{
            cursor: pointer;
            margin: 8px;
            padding-left: 10px;
            text-align: left;
          }
        }
      }
    }
  }
}
</style>
